import React, { Component } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default class App extends Component {
    state = {
        todos:[
            {id:"01",name:"吃饭",done:true},
            {id:"02",name:"睡觉",done:true},
            {id:"03",name:"学习",done:false},
            {id:"04",name:"打游戏",done:false}
        ]
    }
    addTodos = (todosObject) => {
        const newTodos = [todosObject,...this.state.todos];
        this.setState({todos:newTodos});
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodos={this.addTodos}/>
                    <List todos={this.state.todos}/>
                    <Footer/>
                </div>
            </div>
        )
    }
}
